<template>
  <div class="new-page">
    <a-card
        style="margin-top: 24px"
        :bordered="false"
        title="会话列表"
    >
      <!--<div slot="extra">
        <a-radio-group>
          <a-radio-button>全部</a-radio-button>
          <a-radio-button>进行中</a-radio-button>
          <a-radio-button>等待中</a-radio-button>
        </a-radio-group>
        <a-input-search style="margin-left: 16px; width: 272px;" />
      </div>
      <a-button type="dashed" style="width: 100%" icon="plus">添加</a-button>-->
      <a-list size="large" :data-source="data">
        <a-list-item slot="renderItem" slot-scope="session, index" :key="index">
          <a-list-item-meta
              description="会话ID"
          >
            <a slot="title">{{ session.sessionId }}</a>
          </a-list-item-meta>
          <div slot="actions">
            <a @click="startSession(session.sessionId,session.assetsProtocol)">开始</a>
          </div>
          <div slot="actions">
            <a @click="endSession(session.sessionId)">终止连接</a>
          </div>
          <div slot="actions">
            <a-dropdown>
              <a-menu slot="overlay">
                <a-menu-item><a @click="shareConnect(session.sessionId,session.assetsProtocol)">快速共享</a></a-menu-item>
                <a-menu-item><a @click="delSession(session.sessionId)">删除</a></a-menu-item>
              </a-menu>
              <a>更多
                <a-icon type="down"/>
              </a>
            </a-dropdown>
          </div>
          <div class="list-content">
            <div class="list-content-item">
              <span>资产名称</span>
              <p>{{ session.assetsName }}</p>
            </div>
            <div class="list-content-item">
              <span>资产协议</span>
              <p>{{ session.assetsProtocol }}</p>
            </div>
            <div class="list-content-item">
              <span>连接状态</span>
              <p>
                <a-badge v-if="session.isActive" status="success"  text="online"   />
                <a-badge v-else status="default"  text="offline"  />
              </p>
            </div>
          </div>
        </a-list-item>
      </a-list>
    </a-card>
  </div>
</template>

<script>
import {getSessionsInfo, deleteSession,getSessionStatus,closeSession} from '@/services/session'

export default {
  name: "Session",
  data() {
    return {
      extraImage: 'https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png',
      current: 0,
      data: [],
    };
  },
  mounted() {
    this.initData();
    this.timer();
    window.session=this;
  },
  methods: {
    openConnect() {
      let routeData = this.$router.resolve({
        path: "/connect"
      });
      window.open(routeData.href, '_blank');

    },
    initData() {
      getSessionsInfo().then((res) => {
        let data=res.data.sessions
        data.forEach((value,index)=>{
          data[index].isActive=false
        })

        this.data=data;
      })
    },
    startSession(sessionId, sessionProtocol) {
      let routeData = this.$router.resolve({
        path: "/connect/", query: {
          sessionId: sessionId,
          sessionProtocol: sessionProtocol
        }
      });
      window.open(routeData.href, '_blank')
    },
    shareConnect(sessionId, sessionProtocol) {
      let routeData = this.$router.resolve({
        path: "/connect/", query: {
          sessionId: sessionId,
          sessionProtocol: sessionProtocol
        }
      });
      let sharLink = location.href.split('#')[0] + routeData.href
      let that = this
      this.$copyText(sharLink).then(function () {
        that.$message.success("Copy Success")
      }, function () {
        that.$message.error("Copy Failed")
      })
    },
    delSession(sessionId) {
      deleteSession(sessionId).then((res) => {
        console.log(res)
      })
      this.initData()
    },
    endSession(sessionId){
      closeSession(sessionId).then((res) => {
        console.log(res)
      })
    },
    timer(){
      return setInterval(()=>{
        let that =this
          this.data.forEach((value,index)=>{
            let sessionId = value.sessionId
            getSessionStatus(sessionId).then((res)=>{
              that.data[index].isActive=res.data.isActive
            })
          })
        },3000)
    }

  },
  computed: {
    desc() {
      return "开始会话"
    }
  },
  destroyed() {
    clearInterval(this.timer)
  }
};
</script>

<style lang="less" scoped>
.new-page {
  height: 100%;
  background-color: @base-bg-color;
  border-radius: 4px;
  min-height: 400px;
  //margin-top: -24px;
}

.list-content-item {
  color: @text-color-second;
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-left: 40px;
  text-align: left;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  width: 80px;

  span {
    line-height: 20px;
  }

  p {
    margin: 4px 0 0;
    line-height: 22px;
  }
}
</style>